<script>
import { computed, defineComponent, reactive, ref, toRaw } from 'vue'
import MakeForm, { MakeFormState } from '@Components/makeForm'
import * as Antd from 'ant-design-vue'
import { maxSearchValue, rejectSpace } from '@Untils'
import { sexTypeList } from '@Page/role/config'
import { message } from 'ant-design-vue'
import { Messages } from '@Config/config'

export default defineComponent({
  props: {
    record: {
      type: Object,
      default: () => {
        return null
      },
    },
    type: {
      type: Number,
      default: () => {
        return 1 //1正常创建 2编辑
      },
    },
    roleList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  setup(props, context) {
    let record = computed(() => {
      return props.record
    })
    let type = computed(() => {
      return props.type
    })
    let roleList = computed(() => {
      return props.roleList.map((x) => {
        return {
          label: x.roleName,
          value: x.id,
        }
      })
    })

    let pass = {
      key: 'pass',
      initValue: record.value?.pass || '方鑫龙',
      uiType: 'input',
      col: { span: 12 },
      formItem: { label: '昵称' },
      attr: {
       // value:'方鑫龙',
        placeholder: '请输入昵称',
        allowClear: true,
      },
      rule: [
        {
          max: 8,
          message: '昵称最长8个字符',
        },
        {
          min: 3,
          message: '昵称最短3个字符',
        },
        {
          validator: rejectSpace,
          message: '此项不能含有空格',
        },
      ],
    }
    let oldPass = {
      key: 'oldPass',
      initValue: null,
      uiType: 'input',
      col: { span: 12 },
      formItem: { label: '旧密码' },
      attr: {
        placeholder: '请输入旧密码',
        allowClear: true,
      },
      rule: [
        {
          max: 25,
          message: '旧密码最长25个字符',
        },
        {
          min: 6,
          message: '旧密码最短6个字符',
        },
        {
          validator: rejectSpace,
          message: '此项不能含有空格',
        },
      ],
    }
    let newPass = {
      key: 'newPass',
      initValue: null,
      uiType: 'input',
      col: { span: 12 },
      formItem: { label: '新密码' },
      attr: {
        placeholder: '请输入新密码',
        allowClear: true,
      },
      rule: [
        {
          max: 25,
          message: '新密码最长25个字符',
        },
        {
          min: 6,
          message: '新密码最短6个字符',
        },
        {
          validator: rejectSpace,
          message: '此项不能含有空格',
        },
      ],
    }

    let form_config = [
      {
        key: 'userName',
        initValue: record.value?.userName || null,
        uiType: 'input',
        col: { span: 12 },
        formItem: { label: '登录账号' },
        attr: {
          value: 'fangxinlong',
          allowClear: false,
          ...maxSearchValue(),
          disabled: type.value == 1,
        },
        rule: [
          {
            max: 20,
            message: '登录账号最长20个字符',
          },
    
          {
            min: 4,
            message: '登录账号最短4个字符',
          },
          {
            validator: rejectSpace,
            message: '此项不能含有空格',
          },
        ],
      },

      {
        key: 'nickname',
        initValue: record.value?.nickname || null,
        uiType: 'input',
        col: { span: 12 },
        formItem: { label: '密码' },
        attr: {
          value: '********',
          allowClear: false,
          disabled: type.value == 1,
        },
        rule: [
          {
            max: 15,
            message: '姓名最长15个字符',
          },
          {
            validator: rejectSpace,
            message: '此项不能含有空格',
          },
        ],
      },
      ...(() => {
        return type.value == 1 ? [pass] : [newPass, oldPass]
      })(),
      {
        key: 'phone',
        initValue: record.value?.phone || null,
        uiType: 'input',
        col: { span: 12 },
        formItem: { label: '手机号' },
        attr: {
          value:'130****5287',
          placeholder: '请输入手机号',
          allowClear: false,
disabled: type.value == 1,
          rule: [
            {
              max: 20,
              message: '手机号码最长20个字符',
            },
            {
              required: true,
              message: '此项必填',
            },
          ],
        },
      },
      {
        key: 'roleIdList',
        initValue: null,
        uiType: 'input',
        source: roleList.value,
        col: { span: 24 },
        formItem: { label: '二级密码' },
        attr: {
          value:'*******',
          placeholder: '请输入二级密码',
          allowClear: true,
          disabled: type.value == 1,
        },
      },
      {
        key: 'sex',
        initValue: record.value?.sex || 1,
        uiType: 'radio',
        col: { span: 24 },
        formItem: { label: '性别' },
        source: sexTypeList(),
        attr: {
          placeholder: '请输入密码',
          allowClear: true,
        },
      },
      {
        key: 'description',
       initValue: record.value?.description || '这是一个管理员账号',
        uiType: 'textarea',
        col: { span: 24 },
        formItem: { label: '描述' },
        attr: {
          placeholder: '请输入描述',
          allowClear: true,
          showCount: true,
          autoSize: { minRows: 5 },
        },
        rule: [
          {
            max: 128,
            message: '描述最长128个字符',
          },
        ],
      },
    ]

    let loading = ref()

    let form_state = reactive({ data: MakeFormState(form_config) })
    let submitHandler = () => {
      form_ref.value.validate().then(() => {
        Messages.add(message.success('操作成功'))
        context.emit('close')
      })
    }
    let cancelHandler = () => {
      context.emit('close')
    }
    let form_ref = ref()
    return {
      form_ref,
      form_state,
      form_config,
      cancelHandler,
      submitHandler,
      loading,
      roleList,
    }
  },
  render() {
    return (
      <Antd.Row>
        <Antd.Col span={24}>
          <MakeForm
            ref="form_ref"
            formConfig={this.form_config}
            value={this.form_state.data}
          />
        </Antd.Col>

        <Antd.Col span={24}>
          <Antd.Space>
            <Antd.Button
              type="primary"
              onClick={this.submitHandler}
              loading={this.loading}
            >
              确定
            </Antd.Button>
            <Antd.Button
              type="primary"
              danger
              onClick={this.cancelHandler}
              loading={this.loading}
            >
              取消
            </Antd.Button>
          </Antd.Space>
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>
